<script setup>
import { ref,reactive,toRef,toRefs } from "vue";  
const data=reactive({
 TextList:[{name:"学习工具",id:0},{name:'正在参与',id:1}],
 DataList:[]
})
const TabGive=(id)=>{
    cur.value=id
}  
const cur=ref(0)

</script>
<template>
  <div>
    <div class="_tools_backimg_head">
        <div class="_tools_backimg_tab">
            <div v-for="item in data.TextList" :class="[cur===item.id?'active':'']" @click="TabGive(item.id)"  :key="item.id">{{item.name}}</div>
        </div>
       
    </div>
    <div class="_tools_body_main">
            <img v-show="data.DataList.length===0" src="https://wap.lexuemiao.com/img/noData2.ec86a21a.png" alt="">
            <div class="_tools_body_main_text">暂无数据</div>
    </div>
  </div>
</template>
<style scoped>
._tools_backimg_head {
  width: 100%;
  height: 450px;
  background-color: aqua;
  border-radius: 0px 0px 60px 60px;
  background-image: url(https://wap.lexuemiao.com/img/toolBg.361a07fa.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
._tools_backimg_tab{
    width: 90%;
    height: 80px;
    background-color: white;
    position: absolute;
    bottom: 15px;
    left: 5%;
    right: 5%;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}
._tools_backimg_tab div{
    width: 45%;
    height: 60px;
    text-align: center;
    line-height: 60px;
}
.active{
    border-bottom: 10px solid red;
}
._tools_body_main{
    width: 100%;
    height: 450px;
    /* margin-top: 450px; */
    /* z-index: 1; */
    position: relative;
}
._tools_body_main img{
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
._tools_body_main_text{
    color: #ccc;
    text-align: center;
}
</style>
